/* 
1 打开页面的时候 看到学员信息数据
  1 定义一个函数  发送请求获取数据 渲染页面 

2 新增学员
  1 点击  “新增” 按钮 弹出模态框 - 显示新增 表单   已经实现 
  2 新增表单中  籍贯 下拉列表  
    1 重新去熟悉  select 标签
    2 考虑结合业务 实现 

      2 初始化 新增表单中 下拉列表 （省市县）
      1 新增表单中  籍贯 下拉列表  
        1 重新去熟悉  select 标签
        2 考虑结合业务 实现 
        3 发送请求 获取 城市相关数据 来渲染 下拉列表 
      2 需要给 省 下拉列表 绑定 change 事件 
        1 事件触发  获取选中的 “省” 拼接成参数 发送给后端 来获取对应 市 
          后端响应对应  市 数据了，显示在 新增表单中  市 下拉列表中 
      3 需要给 市 下拉列表 绑定 change事件 
        1 事件触发了 获取选中的 市 拼接成参数 发送给后端 来获取对应的 县 
          后端响应对应 县 数据了， 显示在 新增表单中  县  下拉列表

3 编辑学员
  1 给 编辑 按钮绑定点击事件  
    1 弹出编辑-模态框 
  2 让待编辑的数据  显示在 模态框中 
  2 先设置一下 下拉列表 也能正常使用  先实现！！ 


  
4 删除学员
  1 给删除按钮绑定点击事件
  2 事件触发 
  3 确认框询问用户
  4 获取要删除数据的id
  5 拼接参数 发送给后端完成删除
  6 提示用户 
  7 获取最新数据 
 */

const tbody = document.querySelector('tbody');
// 获取form 表单的值
const addForm = document.querySelector('.container.add-form');
// 编辑增表单
const updateForm = document.querySelector('#updateModal form');

// 发送请求 获取数据渲染页面
getStudentList();

// 发送请求获取城市数据 来渲染下拉列表   会导致 错题提示 出现  处理
// 原因可能是  普通数据 返回的格式   和  城市列表返回数据格式 不一样
// 让后端去调整  返回的数据结构 必须一致！！！！

// 找到模态框（addModal）中 name属性为province的标签  是下拉标签 select 省
const provinceSelect = document.querySelector('#addModal [name=province]');
// 找到模态框（addModal）中 name属性为city的标签  是下拉标签 select 市
const citySelect = document.querySelector('#addModal [name=city]');
// 找到模态框（addModal）中 name属性为county的标签  是下拉标签 select 区
const countySelect = document.querySelector('#addModal [name=county]');

// 获取省份
axios.get('/geo/province')
    .then(res => {
        // console.log(res)
        if (res.status === 200) {
            // 渲染省份到下拉列表
            provinceSelect.innerHTML = res.data.reduce((h, v) =>
                h + `<option>${v}</option>`
                , `<option>---省---</option>`)
        }
    })


// 初始化 表单 中 下拉列表
function initSelect(selector) {
    // 发送请求获取城市数据 来渲染下拉列表   会导致 错题提示 出现  处理
    // 原因可能是  普通数据 返回的格式   和  城市列表返回数据格式 不一样
    // 让后端去调整  返回的数据结构 必须一致！！！！
    // const provinceSelect = document.querySelector('#addModal [name=province]'); // 新增表单中  省 下拉列表
    // const citySelect = document.querySelector('#addModal [name=city]'); // 新增表单中  市 下拉列表
    // const countySelect = document.querySelector('#addModal [name=county]'); // 新增表单中  县 下拉列表
    const provinceSelect = document.querySelector(`${selector} [name=province]`); // 新增表单中  省 下拉列表
    const citySelect = document.querySelector(`${selector} [name=city]`); // 新增表单中  市 下拉列表
    const countySelect = document.querySelector(`${selector} [name=county]`); // 新增表单中  县 下拉列表
    renderSelect('/geo/province', {}, provinceSelect, '省');

    // 新增中 省  change事件
    provinceSelect.addEventListener('change', function () {
        // 根据省来获取市
        renderSelect(
            '/geo/city',
            { pname: provinceSelect.value },
            citySelect,
            '市'
        );
        // console.log(11)
    });

    // 新增中 市  change事件
    citySelect.addEventListener('change', function () {
        renderSelect(
            '/geo/county',
            { pname: provinceSelect.value, cname: citySelect.value },
            countySelect,
            '县'
        );
    });

}

// 发送请求 获取数据渲染页面
getStudentList();

// 初始化 新增表单的 下拉列表
initSelect('#addModal');

// 初始化 编辑表单的 下拉列表
initSelect('#updateModal');

// 给tbody标签绑定点击事件
// 编辑 点击
tbody.addEventListener('click', function (e) {
    const dom = e.target;
    if (dom.classList.contains('update-show-modal')) {
        // 弹出 编辑 模态框
        $('#updateModal').modal('show');
        // 获取被编辑的数据id
        const id = dom.dataset.id;
        // 根据id 来发送请求 获取对应数据
        axios.get('/student/one', { params: { id } }).then((result) => {
            // console.
            // 获取 对象
            const obj = result.data.data;

            // 大功能 把对象数据 显示在 form标签中  start
            for (const key in obj) {
                // 根据key 去查找对应的dom元素
                const target = document.querySelector(`#updateModal [name=${key}]`);


                // 性别  单选框  特殊！！
                if (key === 'sex') {
                    // 根据 当前 性别的值 (obj.sex ) 找到 对应的 性别 单选框  让它选中
                    // 既要找到 name = sex 而且 value = obj.sex 标签
                    document.querySelector(
                        `#updateModal [name=sex][value=${obj.sex}]`
                    ).checked = true;
                    continue; // 跳过下面的代码
                }

                // 当找到了这个dom元素 我们才可以设置  给普通的表单元素使用
                if (target) {

                    renderSelect(
                        '/geo/city',
                        { pname: obj.province },
                        document.querySelector('#updateModal [name=city]'),
                        '市',
                        obj.city
                    );

                    // 根据省和市 来 获取 县  默认选中
                    renderSelect(
                        '/geo/county',
                        { pname: obj.province, cname: obj.city },
                        document.querySelector('#updateModal [name=county]'),
                        '市',
                        obj.county
                    );

                    target.value = obj[key];

                }
            }

            // 大功能 把对象数据 显示在 form标签中  end
        });
    } else if (dom.classList.contains('delete-btn')) {
        if (confirm('您确定删除吗?')) {
            const id = dom.dataset.id;
            axios.delete('/student/delete', { params: { id } }).then((result) => {
                if (result.data.code === 0) {
                    toastr.success(result.data.message);
                    getStudentList();
                }
            });
        }
    }
});

// 绑定 编辑表单 提交事件
updateForm.addEventListener('submit', function (e) {
    e.preventDefault();
    // 获取表单数据
    const data = $(updateForm).serialize();
    // // 发送请求 完成新增
    axios.put('/student/update', data).then((result) => {
        if (result.data.code === 0) {
            // 成功
            toastr.success(result.data.message);
            // 重置 表单
            updateForm.reset();
            // 关闭模态框
            $('#updateModal').modal('hide');
            // 获取最新的数据
            getStudentList();
        }
    });
});

//给添加表单 添加提交事件
addForm.addEventListener("submit", function (event) {
    event.preventDefault()
})

// 给提交按钮添加点击事件
const btnPrimary = document.querySelector('.btn-primary');
btnPrimary.addEventListener('click', function (event) {
    const data = $(addForm).serialize()
    console.log(data)
    axios.post('/student/add', data)
        .then(res => {
            if (res.status === 200) {
                toastr.success(res.data.message)
                // 重置新增表单
                addForm.reset();
                // 关闭模态框
                $('#addModal').modal('hide');
                getStudentList();

            }
        })

})

// 发送请求获取数据 显示到对应的 下拉列表中
// url 接口地址
// params 接口的参数
// dom 目标下列表
// label 下拉列表默认显示的文本
function renderSelect(url, params, dom, label, value) {
    axios.get(url, { params }).then((result) => {
        dom.innerHTML = result.data.reduce(
            (h, v) => h + `<option value="${v}">${v}</option>`,
            `<option value="">--${label}--</option>`
        );
        // console.log(dom.innerHTML)
        dom.value = value
    });
}

// 发送请求 获取数据渲染页面
function getStudentList() {
    axios.get('/student/list')
        .then(res => {
            // console.log(res)
            if (res.data.code === 0) {
                // 创建标签到tbody
                let trHTML = ''
                trHTML = res.data.data.reduce((h, v) =>
                    h + `<tr>
                <th scope="row">${v.id}</th>
                <td>${v.name}</td>
                <td>${v.age}</td>
                <td>${v.sex}</td>
                <td>${v.group}</td>
                <td>${v.phone}</td>
                <td>${v.salary}</td>
                <td>${v.truesalary}</td>
                <td>${v.province + v.city + v.county}</td>
                <td>
                <button type="button" data-id="${v.id}" class="btn btn-primary btn-sm update-show-modal">修改</button>
                <button data-id="${v.id}" type="button" class="btn btn-danger btn-sm delete-btn">删除</button>
                </td>
                </tr>`
                    , '')
                // 渲染到tbody
                tbody.innerHTML = trHTML
            }

        })
    // .catch(err => {
    //     console.error(err);
    // })
}

